<template>
    <!-- 聊天中的文件信息组件 -->
    <div class="file-panel" :style="{ cursor: data.sendStatus == 1 || data.sendStatus == 'SENT' ? 'pointer' : '' }">
        <div class="file-info" :title="data.fileName">
            <div class="file-name"> {{ data.fileName }}</div>
            <div class="file-size">大小：{{ proxy.Utils.size2Str(data.fileSize) }}</div>
            <div class="process">
                <span class="iconfont icon-wancheng" v-if="data.sendStatus == 1 || data.sendStatus == 'SENT'"></span>
                <div class="info">{{ data.sendStatus == 1 || data.sendStatus == 'SENT' ? "处理完成" : "处理中" }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const props = defineProps({
    data: {
        type: Object,
        default: {}
    },
});
</script>

<style lang="scss" scoped>
.file-panel {
    display: flex;
    padding: 10px 15px;
    background: #fff;
    align-items: center;

    .file-info {
        width: 150px;
        display: flex;
        flex-direction: column;
        max-width: 100%;

        .file-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .file-size {
            margin-top: 2px;
            font-size: 12px;
            color: #6e6e6e;
        }

        .process {
            margin-top: 2px;
            display: flex;
            align-items: center;

            .loading {
                width: 16px;
            }

            .info {
                margin-left: 5px;
                font-size: 12px;
                color: #545454;
            }

            .icon-wancheng {
                color: #33b8ec;
                font-size: 16px;
                width: 16px;
            }
        }
    }

    .iconfont {
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 40px;
        color: #6e6e6e;
    }
}
</style>
